<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/sockjs-client/1.3.0/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                用户：id1234567收到的消息
            </h3>
        </div>
        <div class="panel-body">
            {{userMsg}}
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">
                服务器提送的时间消息
            </h3>
        </div>
        <div class="panel-body">
            {{timeMsg}}
        </div>
    </div>
</div>

<script>
    var vue=new Vue({
        el:'#app',
        data:{
            userMsg:'',
            timeMsg:''
        }
    })
    var url = 'http://localhost:8080/endpointSang'
    var socket = new SockJS(url, undefined, {protocols_whitelist: ['websocket']});
    var stompClient = Stomp.over(socket);
    stompClient.connect({}, function(frame) {
        stompClient.send('/message',{},'id1234567');
        stompClient.send('/time',{},null);
        stompClient.subscribe('/topic/time', function(message){
            vue.timeMsg=message.body;
        });

        stompClient.subscribe('/user/id1234567/count', function(message){
            vue.userMsg=message.body;
        });
    });

</script>
</body>
</html>